<template>
   <div class="mine-body">
       <!-- 全部订单 -->
       <div class="all">
           <div>全部订单</div>
            <i class="iconfont iconiconset0420"></i>
       </div>
       <!-- 操作列表 -->
       <div class="set-list">
           <ul>
               <li v-for="item in setList" :key="item.title">
                   <div>
                       <i :class="item.classname"></i>
                   </div>
                   <p>{{item.title}}</p>
               </li>
           </ul>
       </div>
       <!-- 信息列表 -->
       <div class="info-list">
           <ul>
               <router-link :to="{path:item.href}" tag="li" v-for="item in infoList" :key="item.title">
                   <div>{{item.title}}</div>
                   <i class="iconfont iconiconset0420"></i>
               </router-link>
           </ul>
       </div>
   </div>
</template>
   
<script>
   export default {
       data () {
           return {
               setList:[
                   {title:"待付款",classname:'iconfont icondaifukuan'},
                   {title:"待使用",classname:'iconfont iconshijianzhongbiao'},
                   {title:"待评价",classname:'iconfont iconpingjia'},
                   {title:"退款/售后",classname:'iconfont icontuikuan'}
               ],
               infoList:[
                   {title:"我的收藏",href:'/collect'},
                   {title:"我的账户",href:'/account'},
                   {title:"我的抽奖单",href:'/prize'},
                   {title:"积分换礼品",href:'/integral'},
               ]
           }
       }
   }
</script>
   
<style scoped lang="less">
   .mine-body{
       .all{
           display: flex;
           height: 1.12rem;
           border-bottom: 1px solid #DDD8CE;
           background: white;
           line-height: 1.12rem;
           div{
               line-height: 1.12rem;
               font-size: .4rem;
               flex: 1;/**占据剩余空间，灵活弹性布局 */
               margin-left: .666667rem;
           }
           i{
               font-size: .533333rem;
               margin-right: .4rem;
           }
       }
       .set-list{
           display: flex;
           height: 2.266667rem;
           background: white;
           ul{
               display: flex;
               width: 100%;
               height: 100%;
               li{
                   list-style: none;
                   width: 25%;
                   text-align: center;
                   div{
                       margin-top: .4rem;
                       margin-bottom: .266667rem;
                       i{
                           font-size: .8rem;
                       }
                   }
               }
           }
       }
       .info-list{
           background: white;
           margin: .4rem 0;
           ul{
               li{
                   display: flex;
                   height:1.12rem;
                   line-height: 1.12rem;
                   border-bottom: 1px solid #dcdcdc;
                   div{
                       flex:1;
                       font-size: .4rem;
                       margin-left: .666667rem;
                       font-size: .4rem;
                   }
                   i{
                        font-size: .533333rem;
                        margin-right: .4rem;
                    }
               }
           }
       }
   }
</style>